<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <link rel="shortcut icon" href="resources/images/favicon.png">
    <link rel="stylesheet" href="resources/css/bootstrap.css">
    <link rel="stylesheet" href="resources/css/xenon-core.css">
    <link rel="stylesheet" href="resources/css/xenon-forms.css">
    <link rel="stylesheet" href="resources/css/xenon-components.css">
    <link rel="stylesheet" href="resources/css/xenon-skins.css">
    <link rel="stylesheet" href="resources/css/custom.css">
    <!--fonts-->
    <link rel="stylesheet" href="resources/fonts/arimo/css/arimo.css">
    <link rel="stylesheet" href="resources/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="resources/fonts/font-awesome-4.7.0/css/font-awesome.css">
    <script src="resources/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="page-title">
<div class="title-env">
    <h1 class="title">查看用户列表</h1>
    <p class="description">
        您可以在此页面上查看用户列表及其用户的详细信息以及冻结账户。
    </p>
</div>
</div>
<div class="row">
<div class="panel panel-default panel-tabs">
    <!-- Add class "collapsed" to minimize the panel -->
        <div class="panel-heading">
            <div class="panel-options">
                <ul class="nav nav-tabs" id="nav_tabs">
                    <li class="active">
                        <a href="#user" data-toggle="tab">普通用户</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane active" id="user">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>用户编号</th>
                                    <th>用户名称</th>
                                    <th>邮箱</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="middle-align" id="middle-align">
                                <tr>
                                    <td>1</td>
                                    <td>张三</td>
                                    <td>userzs@qq.com</td>
                                    <td>
                                        <a data-userID="4"
                                           class="userDetail btn btn-info btn-sm btn-icon icon-left" data-toggle="modal" data-target="#modal-2">详细信息</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>张三</td>
                                    <td>userzs@qq.com</td>
                                    <td>
                                        <a data-userID="4"
                                           class="userDetail btn btn-info btn-sm btn-icon icon-left" data-toggle="modal" data-target="#modal-2">详细信息</a>

                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Main Footer -->
<!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
<!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
<!-- Or class "fixed" to  always fix the footer to the end of page -->
<footer class="main-footer sticky footer-type-1">
    <div class="footer-inner">
        <!-- Add your copyright text here -->
        <div class="footer-text">
            &copy; 2017-2018 <strong>蓝点工作室</strong> 江西农业大学
            <a href="#" target="_blank">大数据智能猪舍</a>
            - 开发团队:
            <a href="#" target="_blank">蓝点工作室</a>
        </div>
        <!-- Go to Top Link, just add rel="go-top" to any link to add this functionality -->
        <div class="go-up">
            <a href="#" rel="go-top">
                <i class="fa-angle-up"></i>
            </a>
        </div>
    </div>
</footer>

<div class="page-loading-overlay">
    <div class="loader-2"></div>
</div>
<div class="modal fade" id="modal-2"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">详细信息</h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">用户编号</label>

                                    <input type="text" class="form-control" id="field-1" placeholder="001" disabled/>
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">真实姓名</label>

                                    <input type="text" class="form-control" id="field-1" placeholder="John" disabled/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">性别</label>

                                    <div class="radio">
                                        <label>
                                            <input type="radio" checked disabled>
                                            保密
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">出生年月</label>

                                    <input type="text" class="form-control" id="field-1" placeholder="2011年11月11日" disabled/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">邮箱地址</label>
                                    <input type="text" class="form-control" id="field-1" placeholder="user@qq.com" disabled/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">手机号码</label>
                                    <input type="text" class="form-control" id="field-1" placeholder="123456789789" disabled/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <img src="../assets/images/user-4.png" alt="user-img" class="img-cirlce img-responsive img-thumbnail" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">

                        <div class="form-group">
                            <label for="field-1" class="control-label">身份证号</label>

                            <input type="text" class="form-control" id="field-1" placeholder="3601111111111111111111" disabled/>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">个人地址</label>

                            <input type="text" class="form-control" id="field-1" placeholder="xxxxxxxxx" disabled/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">工作地址</label>

                            <textarea class="form-control autogrow" cols="5" id="field-5" placeholder="xxxxxxxxxxxxxxxx" disabled></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Imported styles on this page -->
<link rel="stylesheet" href="resources/js/datatables/dataTables.bootstrap.css">
<!-- Bottom Scripts -->
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/TweenMax.min.js"></script>
<script src="resources/js/resizeable.js"></script>
<script src="resources/js/xenon-api.js"></script>
<script src="resources/js/xenon-toggles.js"></script>
<!-- Imported scripts on this page -->
<script src="resources/js/datatables/js/jquery.dataTables.min.js"></script>
<script src="resources/js/datatables/dataTables.bootstrap.js"></script>
<script src="resources/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<!-- JavaScripts initializations and stuff -->
<script src="resources/js/xenon-custom.js"></script>
<!--Specific JS for this page-->
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#example-1").dataTable({
            aLengthMenu: [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "所有"]
            ]
        });
        $("#example-2").dataTable({
            aLengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"]
            ]
        });
        // Replace checkboxes when they appear
        var $state = $("#example-2 thead input[type='checkbox']");

        $("#example-2").on('draw.dt', function() {
            cbr_replace();

            $state.trigger('change');
        });

        // Script to select all checkboxes
        $state.on('change', function(ev) {
            var $chcks = $("#example-2 tbody input[type='checkbox']");

            if($state.is(':checked')) {
                $chcks.prop('checked', true).trigger('change');
            } else {
                $chcks.prop('checked', false).trigger('change');
            }
        });
    });
</script>
</body>
</html>